<template>
  <div class="company-container" v-loading="loading">
    <div v-show="kind==='tip'" class="transition-box">
      <el-card class="box-card">
        <p>
          用户尚未进行授信申请，请先进行授信申请
        </p>
        <el-button @click="inApply=true" type="primary">进行授信申请</el-button>
      </el-card>
    </div>
    <div v-show="kind==='pending'" class="transition-box">
      <el-card class="box-card">
        <p>
          您的申请已提交，我们的客户经理将在3个工作日内与您联系
        </p>
        <el-button @click="toShow" type="primary">查看审核进度</el-button>
      </el-card>
    </div>
    <div v-show="kind==='withdraw'" class="transition-box">
      <withdraw ref="withdraw" @submitWithdraw="submitWithdraw" @cancelWithdraw="cancelWithdraw"></withdraw>
    </div>
    <div v-show="kind==='credit-apply'" class="transition-box">
      <credit-apply ref="creditApply" @submitApply="submitApply" @cancelApply="cancelApply"></credit-apply>
    </div>
    <div v-show="kind==='show'" class="transition-box">
      <limit-show></limit-show>
      <el-button class="btn-go-apply" @click="goWithdraw" type="primary">发起提款申请</el-button>
    </div>
  </div>

</template>

<script>
    import Withdraw from "./subs/Withdraw.vue";
    import CreditApply from './subs/CreditApply.vue';
    import LimitShow from './subs/LimitShow.vue';
    import * as actionTypes from '../../constants/action-types';

    export default {
      name: 'Limit',
      components: {
        Withdraw,
        CreditApply,
        LimitShow
      },
      created(){
        this.fetchData();
      },
      data() {
          return {
            inWithdraw:false,
            inApply:false,
            loading: false,
            isPending: false,
          }
      },
      computed:{
        kind: function(){
          // tip, show,withdraw,credit-apply，pending
          if(this.inWithdraw){
            return 'withdraw';
          }
          if(this.inApply){
            return 'credit-apply';
          }
          if(this.isPending){
            return 'pending';
          }
          return (this.$store.state.creditInfo&&this.$store.state.creditInfo.amount)?'show':'tip';
        },
        creditInfo:function(){
          return this.$store.state.creditInfo;
        },
        localCreditInfo(){
          let local = {}
          if(this.$store.state.creditInfo){
            local = {...local,...this.$store.state.creditInfo}
          }
          return local;
        },
      },
      methods:{
        fetchData(){
          let me =this;
          me.loading=true;
          this.$store.dispatch(actionTypes.GET_CREDITINFO).then(()=>{
            me.loading=false
          }).catch(() => {
            me.loading=false
          })
        },
        goWithdraw(){
          this.kind='withdraw';
        },
        toShow(){
          this.kind='show';
        },
        submitApply(applyInfo){
          let me = this;
          me.loading=true;
          this.$store.dispatch(actionTypes.CREDIT_APPLY, applyInfo).then(()=>{
            me.kind='pending';
            me.loading=false
          }).catch(() => {
            me.loading=false;
          })
        },
        submitWithdrwa(withdrawInfo){
          let me = this;
          me.loading=true;
          this.$store.dispatch(actionTypes.WITHDRAW_APPLY, withdrawInfo).then(()=>{
            me.kind='show';
            me.loading=false
          }).catch(() => {
            me.loading=false;
          })
        },
        cancelApply(){
          this.kind='tip';
        },
        submitWithdraw(){},
        cancelWithdraw(){
          this.kind='show';
        }
      },
    }
</script>

<style lang="stylus" scoped>


</style>
